<template>
	<view  class="home">
        <navbar :title="$t('common.list')" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
		 </navbar>
        <view class="info-box">
            <view class="buying">
                <view v-for="(item, index) in list" :key="index">
                    <view style="text-align: center;border-bottom:1rpx solid #f2f2f2;
		                padding:40rpx 0;">
						<view class="list-item">
							<view style="position:relative;border-radius:50%;overflow:hidden;">
								<u-image :show-loading="false" class="list-avatar" :src="item.avatar" width="68rpx" height="68rpx" mode="" >
									<u-image slot="error" :show-loading="false" class="list-avatar" src="@/static/image/home/avatar.png" width="68rpx" height="68rpx" />
								</u-image>
							</view>
							<view>
								<view class="u-line-1" style="width:135rpx;font-size:28rpx;">{{item.nickname}}</view>
							</view>
							<view>
								<view>{{$t('goodsdetail.personleft',{num: 1})}}</view>
								<view style="margin-top: 2rpx;color: #2399FD;">{{timeFormat(item.end_time)}}</view>
							</view>
                            <view style="width:116rpx;height:60rpx;">
                                <overbtn @btnAction="onPayClick(1)" btnText="Join" :fontSize="24" :propStyle="{width:'116rpx', height: '60rpx', background:$utypeprimary, color: '#C17C1C', border: 'none'}" btnType="overline"></overbtn>
                            </view>
						</view>
					</view>
                </view>
            </view>
        </view>
        <u-popup v-model="group" mode="bottom" closeable border-radius="20">
			<view style="font-size:36rpx;text-align:center;margin-top:30rpx;" v-if="type == 1">{{$t('goodsdetail.newgroup')}}</view>
			<view style="font-size:36rpx;text-align:center;margin-top:30rpx;" v-if="type == 2">{{$t('goodsdetail.directlygroup')}}</view>
            <view class="detail-info u-flex">
                <view style="width:250rpx;height:190rpx;margin-right:30rpx;">
                <image :src="goodInfo.cover_image" style="width:250rpx;height:190rpx;" mode="" />
                </view>
                <view style="flex: 1;">
                    <view class="u-line-2">
                        {{goodInfo.name}}
                    </view>
                    <view class="u-flex u-row-between" style="margin-top:20rpx;">
                        <view style="color:#FC3E32;font-size:36rpx;">{{$currency}}{{goodInfo.price}}</view>
                        <view style="color:#AAA;">x1</view>
                    </view>
                    <view style="color:#FC3E32;font-size:26rpx;margin-top:20rpx;">{{$t('new.paydesc')}}</view>
                </view>
            </view>
            <view style="width: 750rpx;height: 20rpx;background:#F6F6F6;"></view>
            <view class="detail-info">
                <!-- <view class="detail-item u-flex u-row-between">
                    <view class="label">{{$t('goodsdetail.orderno')}}</view>
                    <view class="value">123456789</view>
                </view> -->
                <!-- <view class="detail-item u-flex u-row-between">
                    <view class="label">{{$t('goodsdetail.tradingtime')}}</view>
                    <view class="value">123456789</view>
                </view>
                <view class="detail-item u-flex u-row-between">
                    <view class="label">{{$t('goodsdetail.amount')}}</view>
                    <view class="value">123456789</view>
                </view> -->
                <view class="detail-item u-flex u-row-between" v-if="type == 1">
                    <view class="label">{{$t('goodsdetail.bonus')}}</view>
                    <view class="value">{{otherInfo.leader_bonus}}</view>
                </view>
                <view id="guide_1" :data-guide-text="$t('entry.goodguide2')">
                    <view class="detail-item u-flex u-row-between">
                        <view class="label">{{$t('goodsdetail.maxincome')}}</view>
                        <view class="value">{{goodInfo.buyback}}</view>
                    </view>
                    <view class="detail-item u-flex u-row-between">
                        <view class="label">{{$t('goodsdetail.minincome')}}</view>
                        <view class="value">{{goodInfo.reward}}</view>
                    </view>
                </view>
                <view class="detail-item u-flex u-row-between">
                    <view class="label">{{$t('goodsdetail.purchases')}}</view>
                    <view class="value">{{otherInfo.my_group_buying_num}}/{{otherInfo.group_buying_num}}</view>
                </view>
                <view class="detail-item u-flex u-row-between">
                    <view class="label">{{$t('goodsdetail.ordertoday')}}</view>
                    <view class="value">{{otherInfo.today_buy_num}}/{{otherInfo.daily_buy_num}}</view>
                </view>
                <view class="detail-item u-flex u-row-between" v-if="type == 1">
                    <view class="label">{{$t('goodsdetail.type')}}</view>
                    <view class="value">{{$t('goodsdetail.groupbuy', {num: goodInfo.group_buy_num})}}</view>
                </view>
            </view>
            <!-- <view style="color:#AAAAAA;text-align:center;">
                {{$t('goodsdetail.desc',{num:goodInfo.win_must_num})}}
            </view> -->
            <view id="guide_2" :data-guide-text="$t('entry.goodguide3')" style="margin-top:20rpx;border-radius:20rpx 20rpx 0 0;padding: 20rpx;text-align:center;" :style="{background: $utypeprimary}" @click="paynow">
                <view style="color:#fff;font-size:32rpx;margin-bottom:12rpx;font-weight:400;">{{$t('goodsdetail.paynow', {price: $currency + goodInfo.price})}}</view>
                <view style="color:#fff;font-size:26rpx;">{{$t('new.paydesc')}}</view>
            </view>
		</u-popup>
        <u-mask :show="purchaseModalShow" :zoom="false">
            <view style="display:flex;flex-direction:column;justify-content:center;height:100%;">
                <view class="purchase-box">
                    <view class="purchase-title">
                        {{orderInfo.is_win?$t('goodsdetail.successed'):$t('goodsdetail.failed')}}
                        <image @click="purchaseModalShow=false" src="@/static/image/goods/close_icon.png" style="width:28rpx;height:28rpx;position:absolute;top:0rpx;right:0rpx;padding:20rpx;" mode="" />
                    </view>
                    <view class="purchase-content">
                        <view class="purchase-info u-flex" v-if="orderInfo.is_win">
                            <view style="width:250rpx;height:190rpx;margin-right:30rpx;">
                            <image :src="goodInfo.cover_image" style="width:250rpx;height:190rpx;" mode="" />
                            </view>
                            <view style="flex:1;">
                                <view class="u-line-2">
                                    {{goodInfo.name}}
                                </view>
                                <view class="u-flex u-row-between" style="margin-top:40rpx;width: 100%;">
                                    <view style="color:#FC3E32;font-size:36rpx;">{{$currency}}{{goodInfo.price}}</view>
                                    <view style="color:#AAA;">x1</view>
                                </view> 
                            </view>
                        </view>
                        <!-- <view class="purchase-info" v-if="false">
                            <view style="font-size: 28rpx;color:#AAA;">
                                <span style="vertical-align:middle;">
                                    <image src="@/static/image/goods/time_icon.png" style="width:30rpx;height:30rpx;margin-top:4rpx;" mode="" />
                                </span>
                                {{$t('goodsdetail.progresstitle', {num1: 5, num2: 3})}}
                            </view>
                            <view class="u-flex u-row-start" style="margin-top:20rpx;">
                                <view style="margin-right: 10rpx;color:#AAA;">{{$t('goodsdetail.remaindesc')}}</view>
                                <view class="time-box hourmin">{{20}}</view>
                                :
                                <view class="time-box hourmin">{{20}}</view>
                                :
                                <view class="time-box second">{{20}}</view>
                            </view>
                            <view class="u-flex" style="flex-wrap:wrap;margin-top:30rpx;">
                                <view style="position:relative;width: 20%;text-align:center;" v-for="(item, index) in 10" :key="index">
                                    <u-image :show-loading="false"  class="list-avatar" src="@/static/image/team/gift.png" style="margin:auto;" :class="{teamleader: index == 0}" width="90rpx" height="90rpx" mode="" >
                                        <u-image slot="error" :show-loading="false" class="list-avatar" src="@/static/image/home/avatar.png" width="90rpx" height="90rpx" />
                                    </u-image>
                                    <view class="u-line-1" style="width:90rpx;margin:auto;">playername</view>
                                    <view style="position:absolute;top:0;right:10rpx;min-width:31rpx;height:31rpx;" v-if="index == 0">
                                        <image src="@/static/image/goods/star_icon.png" style="width:31rpx;height:31rpx;" mode="" />
                                    </view>
                                </view>
                            </view>
                        </view> -->
                        <view class="purchase-detail">
                            <view class="u-flex u-row-center" style="margin-bottom: 10rpx;">
                                <image src="@/static/image/goods/purchase_title_left.png" style="width:23rpx;height:21rpx;" mode="" />
                                <view style="margin: 0 15rpx;color:#878D9C;font-size:34rpx;">{{$t('goodsdetail.purchasedetailtitle')}}</view>
                                <image src="@/static/image/goods/purchase_title_left.png" style="width:23rpx;height:21rpx;transform: rotateY(180deg);--webkit-transform:rotateY(180deg);" mode="" />
                            </view>
                            <view id="guide_3" :data-guide-text="$t('entry.goodguide4')" >
                                <view class="detail-item u-flex u-row-between" >
                                    <view class="label">{{$t('goodsdetail.grouppurchasegoods')}}</view>
                                    <view class="value">x{{orderInfo.is_win?1:0}}</view>
                                </view>
                                <view class="detail-item u-flex u-row-between" v-if="Number(orderInfo.earnings) > 0">
                                    <view class="label">{{$t('goodsdetail.cashincome')}}</view>
                                    <view class="value">{{$currency}}{{orderInfo.earnings}}</view>
                                </view>
                            </view>
                            <view class="detail-item u-flex u-row-between" v-if="type == 1">
                                <view class="label">{{$t('goodsdetail.bonus')}}</view>
                                <view class="value">{{$currency}}{{otherInfo.leader_bonus}}</view>
                            </view>
                        </view>
                        <view style="padding: 0 30rpx;font-size: 24rpx;color:#AAA;margin-top: 40rpx;">
                            <span style="vertical-align:middle;">
                                <image src="@/static/image/goods/point_icon.png" style="width:22rpx;height:22rpx;margin-top:4rpx;" mode="" />
                            </span>
                            {{orderInfo.is_win?$t('goodsdetail.faileddesc'):
                            $t('goodsdetail.faileddesc')}}
                        </view>
                        <view style="width:610rpx;height:90rpx;margin:50rpx auto 0 auto;">
                            <overbtn id="guide_4" :data-guide-text="$t('entry.goodguide5')" v-if="!orderInfo.is_win" :btnText="$t('common.confirm')" @btnAction="winConfirm" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
                            <overbtn v-if="orderInfo.is_win" :btnText="$t('goodsdetail.gowarehouse')" @btnAction="() => {winConfirm();navTo('/pages/warehouse/warehouse')}" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
                        </view>
                    </view>
                </view>
            </view>
		</u-mask>
        <u-mask :show="nomoneyShow" :zoom="false" class="flex-mask">
            <view class="nomoney-box">
                <view style="margin-top:240rpx;font-size:32rpx;">
                    {{$t('goodsdetail.notenoughtitle')}}
                </view>
                <view style="margin-top:40rpx;font-size:32rpx;color: #65676B;">
                    {{$t('goodsdetail.canincrease')}}
                </view>
                <view class="inside">
                    <view class="u-flex u-row-between">
                        <view class="label">{{$t('pay.TOP')}}</view>
                        <view class="go-btn">
                            <overbtn :btnText="$t('common.go')" @btnAction="navTo('/pages/pay/pay')" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
                        </view>
                    </view>
                    <view class="u-flex u-row-between" style="margin-top: 40rpx;">
                        <view class="label">{{$t('wode.invite')}}</view>
                        <view class="go-btn">
                            <overbtn :btnText="$t('common.go')" @btnAction="navTo('/pages/team/invite')" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
                        </view>
                    </view>
                </view>
            </view>
            <u-image :show-loading="false" width="60rpx" height="60rpx" style="margin:0 auto;margin-top: 40rpx;" src="@/static/image/icon_delete_tou.png" mode="aspectFit"
                @click="nomoneyShow = false"></u-image>
		</u-mask>
        <u-mask :show="nolongerShow" :zoom="false" class="flex-mask">
            <view class="nomoney-box">
                <view style="margin-top:240rpx;font-size:32rpx;">
                    {{$t('common.sorry')}}
                </view>
                <view style="margin-top:40rpx;font-size:32rpx;color: #65676B;">
                    {{$t('common.pleaseinstall')}}!
                </view>
                <view class="inside">
                    <view class="u-flex u-row-between">
                        <view class="label">{{$t('common.installdirectly')}}</view>
                        <view class="go-btn">
                            <overbtn btnText="Download" @btnAction="downloadApk" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
                        </view>
                    </view>
                    <view class="u-flex u-row-between" style="margin-top: 40rpx;">
                        <view class="label">{{$t('common.gps')}}</view>
                        <view class="go-btn">
                            <overbtn :btnText="$t('common.go')" @btnAction="goToDownload" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
                        </view>
                    </view>
                </view>
            </view>
            <u-image :show-loading="false" width="60rpx" height="60rpx" style="margin:0 auto;margin-top: 40rpx;" src="@/static/image/icon_delete_tou.png" mode="aspectFit"
                @click="nolongerShow = false"></u-image>
		</u-mask>
        <u-mask :show="notimesShow" :zoom="false" class="flex-mask">
            <view class="notimes-box">
                <view style="margin-top:300rpx;font-size:32rpx;color:#65676B;padding: 0 40rpx;">
                    {{$t('goodsdetail.notimes')}}
                </view>
                <view class="inside">
                    <view class="u-flex u-row-between">
                        <view class="label">{{$t('team.mylevel')}}</view>
                        <view class="content">
                            {{$levelArr[userInfo.level]}}
                        </view>
                    </view>
                    <view class="u-flex u-row-between" style="margin-top: 40rpx;">
                        <view class="label">{{$t('goodsdetail.create')}}</view>
                        <view class="content">
                            {{$t('goodsdetail.timesperday', {num: otherInfo.group_buying_num})}}
                        </view>
                    </view>
                </view>
                <view style="margin-top:30rpx;font-size:26rpx;padding: 0 40rpx;">
                    {{$t('goodsdetail.updgrading')}}
                    <text style="color:#FC3E32;font-size:30rpx;">{{$t('goodsdetail.timesperday', {num: otherInfo.next_open_group_num})}}</text>
                </view>
                <view class="u-flex u-row-between" style="padding: 0 30rpx;margin-top: 50rpx">
                    <view style="width: 290rpx;" v-if="!(platform == 'ios' && (systemInfo.is_audited == undefined || systemInfo.is_audited == '0'))">
                        <overbtn :btnText="$t('goodsdetail.viplevel')" @btnAction="navTo('/pages/member/member')" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: $utypeprimary, background: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
                    </view>
                    <view style="width: 290rpx;">
                        <overbtn :btnText="$t('pay.TOP')" @btnAction="navTo('/pages/pay/pay')" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
                    </view>
                </view>
            </view>
            <u-image :show-loading="false" width="60rpx" height="60rpx" style="margin:0 auto;margin-top: 40rpx;" src="@/static/image/icon_delete_tou.png" mode="aspectFit"
                @click="notimesShow = false"></u-image>
		</u-mask>
        <u-mask :show="svgaShow" :zoom="false" class="flex-mask">
            <view class="progress-box">

                <view style="margin-top: 40rpx;">{{$t('goodsdetail.groupprogress')}}</view>
                <view class="avatar-box">
                    <!-- <view>
                    </view> -->
                    <view style="width:20%;height:90rpx;">
                        <mloadingavatar v-if="!waiting[0].time"></mloadingavatar>
                        <image class="scale-up-center" :src="waiting[0].src" mode="" style="width:90rpx;height:90rpx;border-radius:50%;" v-else/>
                    </view>
                    <view v-for="(item, index) in 4" style="width:20%;height:90rpx;margin:24rpx 0;">
                        <mloadingavatar v-if="!waiting[item].time"></mloadingavatar>
                        <image class="scale-up-center" :src="waiting[item].src" mode="" style="width:90rpx;height:90rpx;border-radius:50%;" v-else/>
                    </view>
                </view>
                <view class="u-flex u-row-center progress-text">
                    <image src="@/static/image/goods/renshu.png" style="width:30rpx;height:30rpx;margin-right:12rpx;" mode="" />
                    <view >{{currentProgress}}/{{goodInfo.group_buy_num}}</view>
                </view>
                <view class="progress-line scale-in-hor-left" v-if="svgaShow">
                </view>
                <div id="demoCanvas"></div>
            </view>
		</u-mask>
        <view :prop="start" :change:prop="pixi.onStart"></view>
	</view>
</template>

<script module="pixi" lang="renderjs">
	import SVGA from 'svgaplayerweb';

	export default {
		data() {
			return {
                player: '',
                parser: '',
			}
		},
		watch: {
		},
		created(option) {
		},
		mounted() {
            // let that = this;
			// setTimeout(() => {

                var player = new SVGA.Player('#demoCanvas');

                var parser = new SVGA.Parser('#demoCanvas'); // Must Provide same selector eg:#demoCanvas IF support IE6+
                this.player = player;
                this.parser = parser;

            //     parser.load('https://cdn.jsdelivr.net/gh/aixuxudemao/CDN@1.7/nike.svga', function(videoItem) {
            //         player.loops = 1;
            //         player.clearsAfterStop = false;
            //         that.item = videoItem;
            //         // player.setVideoItem(videoItem);
            //     })
            //     this.player = player;
            // }, 500);
		},
		methods: {
            onStart() {
                let that = this;
                that.parser.load('https://cdn.jsdelivr.net/gh/aixuxudemao/CDN@1.7/nike.svga', function(videoItem) {
                    that.player.loops = 1;
                    that.player.clearsAfterStop = false;
                    // player.setVideoItem(videoItem);
                    that.player.setVideoItem(videoItem);
                    that.player.startAnimation();
                    that.player.onFinished(() => {
                        setTimeout(() => {
                            that.player.clear();
                        }, 500);
                    })
                })
            },
            // onAddOne() {
            //     this.player.startAnimationWithRange({location: 24, length: 10}, false);
            // },
            // onEnd() {
            //     this.player.stepToFrame(35, true);
            //     setTimeout(() => {
            //         this.player.clear();
            //         this.$ownerInstance.callMethod('onProgressDone', {
            //             test: 'test'
			// 	    })
            //     }, 2500);
            // }
		}
	}
</script>

<script>
    // #ifdef APP-PLUS
	var appsFlyer = uni.requireNativePlugin("sn-appsflyer");
	// #endif
    import {
        goodsdetail,
        goodsdetailparam,
        addorder,
		buyerlist
	} from '@/api/goods.js'
    import {
		checkTime,
	} from '@/utils/utils'
	export default {
		components: {
		},
		data() {
			return {
                goodId: '',
                categoryId: '',
                list: [],
                group: false,
                type: 2,
                purchaseModalShow: false,
                goodInfo: {},
                otherInfo: {},
                orderInfo: {},
                start: false,
                addOne: false,
                end: false,
                svgaShow: false,
                currentTimestamp: 0,
                currentProgress: 0,
                loading:false,

                nomoneyShow: false,
                nolongerShow: false,
                notimesShow: false,

                waiting: [
                    {
                        time: false,
                        load: false,
                        src: ''
                    },
                    {
                        time: false,
                        load: false,
                        src: ''
                    },
                    {
                        time: false,
                        load: false,
                        src: ''
                    },
                    {
                        time: false,
                        load: false,
                        src: ''
                    },
                    {
                        time: false,
                        load: false,
                        src: ''
                    },
                ],
			}
		},
		onLoad(option) {
            this.goodId = JSON.parse(option.id);
            this.categoryId = option.categoryid;
            this.load();
            this.loadOther();
            this.loadRecommend();
            this.loadAvatar();
            this.currentTimestamp = new Date().getTime()/1000
		},
		onReady() {
		},
		onShow() {
		},
		computed: {
            userInfo() {
                return this.$store.getters.userInfo || {}
            },
            systemInfo() {
				return this.$store.getters.systemInfo || {}
			},
			platform() {
				return this.$store.getters.platform || ''	
			},
		},
		watch: {
		},
		methods: {
            goToDownload() {
				window.location = this.systemInfo.android_url;
			},
            downloadApk() {
                window.location = this.systemInfo.app_version.update_url_and_file
            },
            loadAvatar() {
                let arr = []
                for (let i = 0; i < 5; i++) {
                    let num = this.rnd(3,489);
                    if (arr.indexOf(num) < 0) {
                        arr.push(num);
                    } else {
                        i--;
                    }
                }
                for (let i in this.waiting) {
                    if ( i == 0) {
                        this.waiting[i].src = this.userInfo.avatar;
                    } else {
                        this.waiting[i].src = `https://ind-test.runcopys.com/uploads/robotpic/${arr[i]}.jpg`;
                    }
                    this.waiting[i].time = false;
                    uni.getImageInfo({
                        src: this.waiting[i].src,
                        success:(res) => {
                            this.waiting[i].src = res.path
                        }
                    });
                }
            },
            rnd(n, m) {
				var random = Math.floor(Math.random() * (m - n + 1) + n);
				return random;
			},
            navTo(val, data) {
				let param = '';
				if (data) {
					param = '?';
					for (let i in data) {
						param += `${i}=${data[i]}&`
					}
				}
				uni.navigateTo({
					url: val + param
				})
			},
            async load() {
                let result = await goodsdetail({
                    id: this.goodId
                })
                this.goodInfo = result;
                this.goodInfo.content = this.goodInfo.content.replace(/<img/g, "<img style='width:100vw'");
            },
            async loadOther() {
                let result = await goodsdetailparam({
                    category_id: this.categoryId
                })
                this.otherInfo = result;
            },
            async loadRecommend() {
                let result = await buyerlist({
                })
                this.list = result;
                for (let i of this.list) {
                   setInterval(() => {
                        i.end_time = Number(i.end_time) - 1;
                    }, 1000);
                }
            },
            timeFormat(end_time) {
                let timestamp = Number(end_time) - Math.floor(this.currentTimestamp);
                return checkTime(parseInt(timestamp/60/60)) + ':' + checkTime(parseInt(timestamp/60%60)) + ':' + checkTime(timestamp%60);
            },
            onPayClick(val) {
                this.group = true;
            },
            onProgressDone() {
                this.svgaShow = false;
                this.purchaseModalShow = true;
                this.loadAvatar();
                this.loadRecommend();
            },
            winConfirm() {
                this.purchaseModalShow = false;
            },
            async paynow() {
                if (this.loading) {
                    return;
                }
                // if (this.platform == 'androidweb' ) {
                //     let times = uni.getStorageSync('newtimes') || 0;
                //     times++;
                //     uni.setStorageSync('newtimes', times)
                //     if (times > 2 || new Date(new Date(this.userInfo.jointime*1000).toLocaleDateString()).getTime() < new Date(new Date().toLocaleDateString()).getTime()) {
                //         this.group = false;
                //         this.loading = false;
                //         this.nolongerShow = true;
                //         return;
                //     }
                // }
                this.loading = true;
                uni.showLoading({
                    mask: true
                });
                try {
                    let result = await addorder({
                        type: this.type,
                        amount: this.goodInfo.price,
                        good_id: this.goodInfo.id,
                        earnings: this.goodInfo.reward,
                        category_id: this.goodInfo.category_id
                    })
                    uni.hideLoading();
                    if (result.code && result.code == 9) {
                        this.group = false;
                        this.loading = false;
                        this.notimesShow = true;
                        return;
                    }
                    if (result.code && result.code == 10) {
                        this.group = false;
                        this.loading = false;
                        this.nomoneyShow = true;
                        return;
                    }
                    this.orderInfo = result.order_info;
                    this.orderInfo.is_win = result.is_win;
                    let that = this;
                    // #ifdef APP-PLUS
                    try {
                        appsFlyer.logEvent({
                                eventName: "af_purchase",
                                eventValues: {
                                    'af_content_type': 'group',
                                    'af_content_id': that.orderInfo.order_id,
                                }, // 事件数据
                            },
                            (e) => {
                                console.log(e)
                            }
                        );
                    } catch (error) {
                        console.log(error);
                    }
                    // #endif
                    this.group = false;
                    this.svgaShow = true;
                    let num = Number(this.goodInfo.group_buy_num);
                    this.currentProgress = 0;
                    this.loading = false;

                    let stepSec = 3500/num;

                    
                    setTimeout(() => {
                        let count = 0;
                        let interval = setInterval(() => {
                            this.waiting[count].time = true;
                            if (count == 4) {
                                clearInterval(interval)
                            }
                            count++;
                        }, 600);
                        for (let i = 0,delay = 0; i < num; i++) {
                            
                            (function(j,de) {
                                    setTimeout(() => {
                                        that.currentProgress = j+1;
                                    }, delay);
                                    return;
                            })(i, delay)
                            delay += stepSec
                        }
                        setTimeout(() => {
                            this.start = !this.start;
                            setTimeout(() => {
                                this.onProgressDone();
                            }, 1000);
                        }, 4550);
                    }, 500);
                } catch (error) {
                    this.loading = false;
                }
                
                // this.purchaseModalShow = true;
            },
		},
		onHide() {
		},
		destroyed() {
		},
		onPullDownRefresh() {
		},
		onPageScroll(e) {
		},
	}
</script>

<style lang="scss" scoped>
    page {
    }
    .flex-mask {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .banner {
        width: 100%;
        // height: 450rpx;
        height: 570rpx;
        overflow: hidden;
        // margin-top: -88rpx;

        .banner-swiper {
            width: 100%;
            height: 100%;
        }
        /deep/ .u-swiper-indicator {
            right: 0!important;
        }
    }
    .info-box {
        .buying {
            background: #FFF;
            padding: 0rpx 20rpx 0 20rpx;
            border-radius: 20rpx;
            .list-item {
                color:#65676B;
                font-size:26rpx;
                .align-center-vertical{
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    flex-direction: column;
                }
                // margin-top:18rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
    }
    .detail-info {
        padding: 40rpx;
        font-size: 30rpx;
        .detail-item {
            height: 66rpx;
            line-height: 66rpx;
            .label {
                color: #65676B;
            }
            .value {
                color: #0F0F0E;
            }
        }
    }
    .purchase-box {
		overflow: hidden;
		background: $u-type-primary;
		border-radius: 20rpx;
		width: 670rpx;
		margin:auto;
        .time-box {
            width: 36rpx;
            height: 34rpx;
            margin:0 4rpx;
            text-align: center;
            font-size: 24rpx;
            line-height: 34rpx;
            color: $u-type-primary;
            border-radius: 5rpx;
        }
        .hourmin {
            background: #0F0F0E;
        }
        .second {
            background: #FC3E32;
        }
        .purchase-title {
            position: relative;
            height: 104rpx;
            line-height: 104rpx;
            color:#000000;
            font-size: 36rpx;
            text-align: center;
        }
        .purchase-content {
            position: relative;
            background: #FFF;
            padding-bottom: 50rpx;
            font-size: 30rpx;
            z-index: 1;
            .purchase-info {
                padding: 30rpx;
                .teamleader {
                    border:2rpx solid #FC3E32;
                    border-radius:50%!important;
                }
            }
            .purchase-detail {
                background: #F6F6F6;
                padding: 20rpx;
                margin: 10rpx 20rpx;
                border-radius: 20rpx;
                .detail-item {
                    line-height: 52rpx;
                    height: 52rpx;
                }
            }
        }
        .purchase-content:after {
            background: #FFF;
            width: 200%;
            position:absolute;
            height: 200rpx;
            left: -50%;
            top: -20rpx;
            z-index:-1;
            content: '';
            border-radius: 50% 50% 0 0;
        }
	}
    #demoCanvas {
		width: 100%;
		height: 60rpx;
	}
    .progress-box {
        border-radius: 20rpx;
        background:#FFF;
        width: 670rpx;
        margin: 0 auto;
        font-size: 38rpx;
        color: #000;
        font-weight: 400;
        text-align: center;
        position: relative;
        overflow: hidden;
        .avatar-box {
            margin-top: 50rpx;
            padding: 0 12rpx;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: start;
        }
        .progress-line {
            background: $u-type-primary;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 670rpx;
            height: 22rpx;
        }
    }
    .progress-text {
        margin: 30rpx 0;
        font-size: 42rpx;
    }
    .scale-up-center {
	-webkit-animation: scale-up-center 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
	        animation: scale-up-center 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
}
    	@-webkit-keyframes scale-up-center {
	0% {
		-webkit-transform: scale(0);
				transform: scale(0);
        -webkit-filter: blur(40rpx);
                filter: blur(40rpx);
        background: #ECECEC;
	}
	100% {
		-webkit-transform: scale(1);
				transform: scale(1);
-webkit-filter: blur(0);
                filter: blur(0);
            background: transparent;
	}
	}
	@keyframes scale-up-center {
	0% {
		-webkit-transform: scale(0);
				transform: scale(0);
-webkit-filter: blur(40rpx);
                filter: blur(40rpx);
                background: #ECECEC;
	}
	100% {
		-webkit-transform: scale(1);
				transform: scale(1);
                    -webkit-filter: blur(0);
            filter: blur(0);
            background: transparent;
	}
	}
.scale-in-hor-left {
	-webkit-animation: scale-in-hor-left 5s ease-in-out both;
	        animation: scale-in-hor-left 5s ease-in-out both;
}
/* ----------------------------------------------
 * Generated by Animista on 2022-9-29 16:35:58
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-hor-left
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-hor-left {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  70% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  71% {
    -webkit-transform-origin: center center;
        transform-origin: center center;
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);

    opacity: 1;
  }
}
@keyframes scale-in-hor-left {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  70% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  71% {
    -webkit-transform-origin: center center;
        transform-origin: center center;
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    opacity: 1;
  }
}
.nomoney-box {
        overflow: hidden;
        margin: 0 auto;
        width: 670rpx;
        height: 664rpx;
        background: url(@/static/image/goods/nomoney_bg.png) no-repeat;
        background-size: 100%;
        text-align: center;
        .inside {
            margin:auto;
            margin-top: 30rpx;
            background: #F6F6F6;
            border-radius: 20rpx;
            width:610rpx;
            padding: 40rpx 30rpx;
            .label {
                color: #65676B;
                font-size: 32rpx;
            }
            .go-btn {
                height: 60rpx;
                width: 160rpx;
            }
        }
    }
    .notimes-box {
        overflow: hidden;
        margin: 0 auto;
        width: 670rpx;
        height: 952rpx;
        background: url(@/static/image/goods/notimes_bg.png) no-repeat;
        background-size: 100%;
        text-align: center;
        .inside {
            margin:auto;
            margin-top: 30rpx;
            background: #F6F6F6;
            border-radius: 20rpx;
            width:610rpx;
            padding: 40rpx 30rpx;
            .label {
                color: #65676B;
                font-size: 32rpx;
            }
            .content {
                color: #2399FD;
                font-size: 30rpx;
            }
        }
    }
</style>
